<template>
	<div style="height: 100%;" class="firpage publicbox" v-loading="loading">
		<!-- <el-tab-pane label="数据统计" name="all"> -->
		<vueScroll>
			<div class="pane-top" v-if="roleId == 0">
				<el-row :gutter="10">
					<el-col :span="3.5">
						<el-select :remote-method="remoteMethod" filterable remote clearable v-model="input" placeholder="请按照关键词查找"
						 @focus="focusSelectd" size="mini">
							<el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="1.5">
						<el-button type="primary" icon="el-icon-search" @click="find()" size="mini">确定</el-button>
					</el-col>
					<el-col :span="1.5">
						<el-button icon="el-icon-delete" @click="reset()" size="mini">重置</el-button>
					</el-col>
				</el-row>
				<!-- 维保单位 -->
				<el-row :gutter="10" style="margin-top: 15px;" v-show="isShowMain">
					<el-col :span="1.5" v-for="(item,index) in maintainArr" :key='index'>
						<div style="height: 28px;line-height: 28px;"><span style="color:#909399 ;">{{item.name}}:</span><span style="color: #303133;margin-left: 3px;">{{item.count}}</span><span
							 style="color:#909399;margin-left: 3px;"><i v-show="index == 0">家</i><i v-show="index !== 0">份</i></span>
						</div>
					</el-col>
				</el-row>
			</div>
			<!-- 当月使用电梯 -->
			<el-row :gutter="10" style="margin-top: 15px;">
				<el-col :span="4">
					<div style="height: 28px;line-height: 28px;float: left;"><span style="color:#909399 ;">{{newTime}}月电梯数:</span><span
						 style="color: #303133;margin-left: 3px;">{{numbers}}</span><span style="color:#909399;margin-left: 3px;">台</span>
					</div>
				</el-col>
				<div style="height: 28px;line-height: 28px;margin-left: 10px;float: left;"><span style="color:#909399 ;">第三方电梯数量:</span><span
					 style="color: #303133;margin-left: 3px;">{{anotherEle}}</span><span style="color:#909399;margin-left: 3px;">台</span>
				</div>
			</el-row>

			<!-- card 图 -->
			<el-row :gutter="20" style="margin-top: 15px;">
				<el-col :span="6" v-for="(item,index) in cardArr" :key='index'>
					<el-card shadow="hover">
						<div class="centetTitle">
							{{item.allCount}}
						</div>
						<div class="place">
							<p class="place-header  marginTop flexCenter">
								<i class="no"></i>
								未备案：<span class="speC">{{item.wCount}}</span>
							</p>
							<p class="place-header flexCenter">
								<i class="succc"></i>
								备案成功：<span class="speC">{{item.tCount}}</span>
							</p>
							<p class="place-header flexCenter">
								<i class="shibai"></i>
								备案失败：<span class="speC">{{item.fCount}}</span>
							</p>
						</div>
						<div class="changeU">
							<h3> <i :class="[index==1? 'img2' : '', index==2? 'img3' : '',index==3? 'img4' : '' ]"></i>{{item.name}}</h3>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<div ref='annularMain' style="width:100%;height: 300px;margin-top: 70px;"></div>
			<div ref='columnarMain' style="width:100%;height: 400px;margin-top: 50px;"></div>
			<!-- </el-tab-pane> -->
		</vueScroll>
	</div>
</template>
<script>
	// 引入 ECharts 主模块
	import * as echarts from 'echarts/lib/echarts';
	// 引入柱状图
	import 'echarts/lib/chart/bar';
	import 'echarts/lib/chart/line';
	import 'echarts/lib/chart/pie';
	// 引入提示框和标题组件
	import 'echarts/lib/component/tooltip';
	import 'echarts/lib/component/title';
	import 'echarts/lib/component/legend';
	import 'echarts/lib/component/grid';
	import {
		axiosGet,
		axiosPost,
	} from "@/common.js"
	export default {
		data() {
			return {
				activeName: 'all',
				loading: true,
				input: '',
				selectList: [],
				maintainArr: [{
						name: '维保单位',
						count: 0
					},
					{
						name: '未备案',
						count: 0
					},
					{
						name: '备案成功',
						count: 0
					},
					{
						name: '备案失败',
						count: 0
					}
				],
				cardArr: [{
						allCount: 0,
						wCount: 0,
						tCount: 0,
						fCount: 0,
						name: '电梯绑定'
					},
					{
						allCount: 0,
						wCount: 0,
						tCount: 0,
						fCount: 0,
						name: '电梯'
					},
					{
						allCount: 0,
						wCount: 0,
						tCount: 0,
						fCount: 0,
						name: '维保人员'
					},
					{
						allCount: 0,
						wCount: 0,
						tCount: 0,
						fCount: 0,
						name: '维保合同'
					}
				],
				columnar: [],
				timeArr: [],
				newTime: new Date().getMonth() + 1,
				numbers: 0,
				anotherEle: 0,
				isShowMain: true
			}
		},
		mounted() {
			//获取下拉框数据
			this.getSelectList()
			//获取图标数据
			this.getTableList()
			//获取当月电梯
			this.useEle()
			//获取第三方电梯
			this.anotherLift()
		},
		computed: {
			roleId() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ""
				}
			},
			companyId() {
				if (localStorage.company_id) {
					return JSON.parse(localStorage.company_id).id
				} else {
					return ''
				}
			}
		},
		methods: {
			//累加数组
			sumArr(arr) {
				return arr.reduce(function(prev, cur) {
					return prev + cur;
				}, 0);
			},
			//搜索
			find() {
				this.loading = true
				this.isShowMain = false
				let query = ""
				this.selectList.map((item) => {
					if (this.input === item.id) {
						return query = item.name
					}
				})
				this.useEle('find')
				this.getTableList(query)
			},
			reset() {
				this.input = ''
				this.loading = true
				this.isShowMain = true
				this.getTableList()
				this.useEle()
			},
			//获取下拉数据
			getSelectList() {
				let params = {
					company_type: 100,
					page_size_count: 30,
					statistics: 1
				}
				axiosGet('/user/company/', params, (res) => {
					console.log(res)
					if (res.code == 0) {
						this.selectList = res.detail.results
						console.log(this.selectList)
					} else {
						console.log('获取首页下拉框数据失败')
					}
				})
			},
			//下拉选中时
			focusSelectd() {
				if (!this.input) {
					this.getSelectList()
				}
			},
			//下拉搜索
			remoteMethod(query) {
				if (!!query) {
					let url = "/user/company/?company_type=100" + '&key_words=' + query
					let params = {
						page_size_count: 30,
					}
					axiosGet(url, {}, (res) => {
						if (res.code == 0) {
							this.selectList = res.detail.results
						} else {
							console.log('搜索失败')
						}
					})
				}
			},
			//获取图表数据公告方法
			public(res, name, color) {
				let recent_contract = []
				recent_contract = res.map((item) => {
					return item[1]
				})
				let contract = {
					name: name,
					data: recent_contract,
					color: color
				}
				this.columnar.push(contract)
			},
			//获取图表数据
			getTableList(query) {
				let url = ''
				if (!!query) {
					url = "/user/count/?" + 'key_words=' + query
				} else {
					url = '/user/count'
				}
				axiosGet(url, {}, (res) => {
					console.log(res)
					this.loading = false
					if (res.code == 0) {
						if (this.roleId == 0) {
							if (!!query) {
								this.maintainArr[0].count = res.detail.maintain_num
								this.maintainArr[1].count = res.detail.registry.maintain_company_w
								this.maintainArr[2].count = res.detail.registry.maintain_company_t
								this.maintainArr[3].count = res.detail.registry.maintain_company_f

								this.cardArr[0].allCount = res.detail.person_bind_num
								this.cardArr[0].wCount = res.detail.registry.person_bind_w
								this.cardArr[0].tCount = res.detail.registry.person_bind_t
								this.cardArr[0].fCount = res.detail.registry.person_bind_f

								this.cardArr[1].allCount = res.detail.elevator_num
								this.cardArr[1].wCount = res.detail.registry.elevator_w_g
								this.cardArr[1].tCount = res.detail.registry.elevator_t_g
								this.cardArr[1].fCount = res.detail.registry.elevator_f_g

								this.cardArr[2].allCount = res.detail.maintain_person_num
								this.cardArr[2].wCount = res.detail.registry.person_w_g
								this.cardArr[2].tCount = res.detail.registry.person_t_g
								this.cardArr[2].fCount = res.detail.registry.person_f_g

								this.cardArr[3].allCount = res.detail.contract_num
								this.cardArr[3].wCount = res.detail.registry.contract_w_g
								this.cardArr[3].tCount = res.detail.registry.contract_t_g
								this.cardArr[3].fCount = res.detail.registry.contract_f_g
							} else {
								this.maintainArr[0].count = res.detail.maintain_company_count
								this.maintainArr[1].count = res.detail.registry.maintain_company_w
								this.maintainArr[2].count = res.detail.registry.maintain_company_t
								this.maintainArr[3].count = res.detail.registry.maintain_company_f

								this.cardArr[0].allCount = res.detail.person_bind_count
								this.cardArr[0].wCount = res.detail.registry.person_bind_w
								this.cardArr[0].tCount = res.detail.registry.person_bind_t
								this.cardArr[0].fCount = res.detail.registry.person_bind_f

								this.cardArr[1].allCount = res.detail.elevator_count
								this.cardArr[1].wCount = res.detail.registry.elevator_w
								this.cardArr[1].tCount = res.detail.registry.elevator_t
								this.cardArr[1].fCount = res.detail.registry.elevator_f

								this.cardArr[2].allCount = res.detail.maintain_person_count
								this.cardArr[2].wCount = res.detail.registry.person_w
								this.cardArr[2].tCount = res.detail.registry.person_t
								this.cardArr[2].fCount = res.detail.registry.person_f

								this.cardArr[3].allCount = res.detail.contract_count
								this.cardArr[3].wCount = res.detail.registry.contract_w
								this.cardArr[3].tCount = res.detail.registry.contract_t
								this.cardArr[3].fCount = res.detail.registry.contract_f
							}
						} else {
							this.cardArr[0].allCount = res.detail.person_bind_num
							this.cardArr[0].wCount = res.detail.registry.person_bind_w
							this.cardArr[0].tCount = res.detail.registry.person_bind_t
							this.cardArr[0].fCount = res.detail.registry.person_bind_f

							this.cardArr[1].allCount = res.detail.elevator_num
							this.cardArr[1].wCount = res.detail.registry.elevator_w_g
							this.cardArr[1].tCount = res.detail.registry.elevator_t_g
							this.cardArr[1].fCount = res.detail.registry.elevator_f_g

							this.cardArr[2].allCount = res.detail.maintain_person_num
							this.cardArr[2].wCount = res.detail.registry.person_w_g
							this.cardArr[2].tCount = res.detail.registry.person_t_g
							this.cardArr[2].fCount = res.detail.registry.person_f_g

							this.cardArr[3].allCount = res.detail.contract_num
							this.cardArr[3].wCount = res.detail.registry.contract_w_g
							this.cardArr[3].tCount = res.detail.registry.contract_t_g
							this.cardArr[3].fCount = res.detail.registry.contract_f_g
						}

						//获取日期
						let recent_contract = []
						recent_contract = res.detail.recent_contract.map((item) => {
							return item[0]
						})
						this.timeArr = recent_contract
						this.columnar = []
						this.public(res.detail.recent_contract, '维保合同', '#E6A23C')
						this.public(res.detail.recent_elevator, '电梯', '#909399')
						if (this.roleId == 0) {
							this.public(res.detail.recent_maintain, '维保单位', '#F56C6C')
						}
						this.public(res.detail.recent_person, '维保人员', "#67C23A")
						this.public(res.detail.recent_person_bind, '电梯绑定', "skyblue")

						//环形图 和 柱状图
						this.createAnnular()
						this.createColumnar()
					} else {
						console.log('获取数据失败')
					}
				})
			},
			//获取当月使用电梯数量
			useEle(company) {
				/* 使用电梯数量 */
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let yearMonth = `${year}-${month}`
				let url = ''
				let params = {}
				if (this.roleId === 0) {
					params = {
						page_size_count: 9999
					}
					if (!!company) {
						url = "/basic/statistics/?month=" + yearMonth + "&company=" + this.input
					} else {
						url = "/basic/statistics/?month=" + yearMonth
					}
				} else {
					url = "/basic/statistics/?month=" + yearMonth + "&company=" + this.companyId
					params = {}
				}
				axiosGet(url, params, (res) => {
					console.log(res)
					let arr = []
					if (res.code == 0) {
						if (res.detail.results.length > 0) {
							if (url.indexOf('&company') > -1) {
								this.numbers = res.detail.results[0].numbers
							} else {
								res.detail.results.map((item) => {
									return arr.push(item.numbers)
								})
								this.numbers = this.sumArr(arr)
							}
						}
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//第三方电梯数量
			anotherLift() {
				if (this.roleId == 0) {
					axiosGet('/basic/third/', {}, (res) => {
						if (res.code == 0) {
							this.anotherEle = res.detail
						}

					})
				}
			},
			//绘制环形图
			createAnnular() {
				let canvesPie = []
				console.log(this.cardArr)
				this.cardArr.map((item, index) => {
					let obj = {
						name: item.name, //tooltip提示框中显示内容
						type: 'pie', //图形类型，如饼状图，柱状图等
						center: [`${21*(index+1)}%`, '53%'],
						radius: ['35%', '53%'], //饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
						//roseType:'area',是否显示成南丁格尔图，默认false
						itemStyle: {
							normal: {
								label: {
									show: true,
									textStyle: {
										color: '#3c4858',
										fontSize: "13"
									},
									formatter: function(val) { //让series 中的文字进行换行
										return val.name.split("-").join("\n");
									}
								}, //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
								labelLine: {
									show: true,
									lineStyle: {
										color: '#3c4858'
									}
								} //线条颜色
							}, //基本样式
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)', //鼠标放在区域边框颜色
								textColor: '#000'
							} //鼠标放在各个区域的样式
						},
						data: [{
								value: item.wCount,
								name: '未备案'
							},
							{
								value: item.tCount,
								name: '备案成功'
							},
							{
								value: item.fCount,
								name: '备案失败'
							},
							{
								value: 0,
								name: '总数统计',
								tooltip: {
									show: false
								},
								labelLine: {
									show: false,
								},
								label: {
									normal: {
										position: 'center',
										textStyle: {
											fontSize: 16,
											color: '#303133',
										},
										formatter: () => {
											const total = item.allCount
											return `${item.name}\n${total}`
										}
									}
								}
							}
						], //数据，数据中其他属性，查阅文档
						color: ['#E6A23C', '#67C23A', '#F56C6C'], //各个区域颜色
					} //数组中一个{}元素，一个图，以此可以做出环形图
					canvesPie.push(obj)
				})
				console.log(canvesPie)
				var myChart = echarts.init(this.$refs.annularMain);
				myChart.setOption({
					backgroundColor: "#fff",
					title: {
						text: '备案信息',
						left: '1%',
						top: '6%',
						textStyle: {
							color: '#434a50'
						}
					}, //标题
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)",
						/*formatter:function(val){   //让series 中的文字进行换行
						     console.log(val);//查看val属性，可根据里边属性自定义内容
						     var content = var['name'];
						     return content;//返回可以含有html中标签
						 },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
					}, //提示框，鼠标悬浮交互时的信息提示
					legend: {
						show: false,
						orient: 'vertical',
						x: 'left',
						data: ['未备案', '备案成功', '备案失败']
					}, //图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
					graphic: {
						type: 'text',
						left: 'center',
						top: 'center',
						style: {
							// text: '维保单位\n' + '100', //使用“+”可以使每行文字居中
							textAlign: 'center',
							font: 'italic bolder 16px cursive',
							fill: '#000',
							width: 30,
							height: 30
						}
					}, //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
					series: canvesPie
				})
			},
			//绘制柱状图
			createColumnar() {
				let columnarArr = []
				console.log(this.columnar)
				this.columnar.map((item) => {
					let obj = {
						name: item.name,
						smooth: true,
						type: 'line',
						symbolSize: 8,
						itemStyle: {
							normal: {
								lineStyle: {
									width: 0.9 // 0.1的线条是非常细的了
								}
							}
						},
						label: {
							normal: {
								show: true,
								position: 'top',
								textStyle: {
									color: item.color
								}
							}
						},
						symbol: 'circle',
						data: item.data
					}
					columnarArr.push(obj)
				})
				let data = ['电梯', "维保人员", "电梯绑定", "维保合同", "维保单位"]
				var myChart = echarts.init(this.$refs.columnarMain);
				let timeArr = this.timeArr
				myChart.setOption({
					backgroundColor: "#fff",
					color: ['#E6A23C', '#909399', '#F56C6C', "#67C23A", "skyblue"],
					title: [{
						text: '维保平台数据',
						left: '1%',
						top: '6%',
						textStyle: {
							color: '#434a50'
						}
					}],
					tooltip: {
						trigger: 'axis'
					},

					legend: {
						x: 300,
						top: '7%',
						left: "67%",
						textStyle: {
							color: '#545c64',
						},
						data: data
					},
					grid: {
						left: '1%',
						right: '5%',
						top: '90',
						bottom: '6%',
						containLabel: true
					},
					toolbox: {
						"show": false,
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						"axisLine": {
							lineStyle: {
								color: '#409EFF' //x轴线颜色
							}
						},
						"axisTick": {
							"show": false
						},
						axisLabel: {
							textStyle: {
								color: '#434a50' //x轴文字颜色
							}
						},
						boundaryGap: false,
						data: timeArr
					},
					yAxis: {
						"axisLine": {
							lineStyle: {
								color: '#409EFF' //y轴线颜色
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#409EFF' //框线颜色
							}
						},
						"axisTick": {
							"show": false
						},
						axisLabel: {
							textStyle: {
								color: '#434a50'
							}
						},
						type: 'value'
					},
					series: columnarArr
				});
			}

		}
	}
</script>
<style lang="less" scoped>
	h3 {
		color: #909399;
		width: 100%;
		height: 21px;
		line-height: 21px;
		margin-top: 7px;
		text-align: center;
		display: flex;
		justify-content: center;
	}

	.centetTitle {
		text-align: center;
		height: 25px;
		line-height: 25px;
		font-size: 29px;
		color: #303133;
		margin-top: 7px;
	}

	.place {
		width: 140px;
		height: 90px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.place-header {
			font-size: 16px;
			color: #909399;
			margin-top: 3px;

			.speC {
				color: #303133;
				font-size: 18px;
			}
		}

		.marginTop {
			margin-top: 7px;
		}

		.flexCenter {
			display: flex;
			align-items: center;
		}

		.no {
			width: 17px;
			height: 20px;
			background: url(../../assets/imagePic/4.png) no-repeat 0 0;
			background-size: cover;
		}

		.succc {
			width: 17px;
			height: 20px;
			background: url(../../assets/imagePic/3.png) no-repeat 0 0;
			background-size: cover;
		}

		.shibai {
			width: 17px;
			height: 20px;
			background: url(../../assets/imagePic/6.png) no-repeat 0 0;
			background-size: cover;
		}
	}

	.place-header i {
		margin-right: 5px;
	}

	.changeU i {
		display: inline-block;
		font-style: normal;
		height: 21px;
		width: 21px;
		background: url(../../assets/imagePic/house.png) no-repeat 0 0;
		background-size: cover;
		margin-right: 5px;
	}

	.changeU .img2 {
		height: 22px;
		width: 19px;
		background: url(../../assets/imagePic/8.png) no-repeat 0 0;
		background-size: cover;
	}

	.changeU .img3 {
		height: 21px;
		width: 22px;
		background: url(../../assets/imagePic/person.png) no-repeat 0 0;
		background-size: cover;
	}

	.changeU .img4 {
		height: 22px;
		width: 21px;
		background: url(../../assets/imagePic/pact.png) no-repeat 0 0;
		background-size: cover;
	}

	p {
		width: 220px;
		height: 25px;
		line-height: 25px;
		font-size: 29px;
		color: #303133;
		margin-top: 7px;
	}

	.firpage {
		overflow-y: auto;
		overflow-x: hidden;
	}

	.changeU {
		width: 200px;
		text-align: center;
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
	}

	.el-row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
</style>
